<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="__PUBLIC__/weixin/css/mui.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/public.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/goods_detail.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/previewimage.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/font-awesome.min.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/iconfont.css" />
		<style>
			.mui-content {
				padding-bottom: 61px;
			}
			
			#groupimg .mui-slider-indicator {
				position: absolute;
				width: 100%;
				bottom: 5px;
				left: 0;
				z-index: 8;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: none;
			}
			
			#groupimg .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				width: 12px;
				height: 12px;
				display: inline-block;
				border-radius: 50%;
				background: #eee;
				margin: 0 3px;
				border: none;
			}
			
			#groupimg .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background: #f44623;
			}
			
			#sliderSegmentedControl2 .mui-control-item {
				margin-top: 0;
				margin-right: 5px;
				margin-bottom: 0;
				margin-left: 0px;
				padding: 0;
				width: 80px;
			}
			
			#sliderSegmentedControl2 .mui-control-item .slider-imgbox {
				width: 80px;
				height: 80px;
				border: 1px dashed #ececec;
			}
			/*弹框*/
			
			#middlePopover .mui-popover-arrow {
				display: none;
			}
			
			#middlePopover.mui-popover {
				top: 50%!important;
				left: 7%!important;
				width: 86%;
				height: 410px;
				background-color: #fff;
				margin-top: -205px;
				border-radius: 3px;
				border: 2px solid rgb(159, 161, 163);
				overflow: hidden;
			}
			
			.m_shop {
				position: relative;
			}
			
			.m_shop h3 {
				padding: 0px 10px;
				height: 40px;
				line-height: 40px;
				background: #DBE1E5;
				font-size: 14px;
			}
			
			.m_shop .m_close {
				position: absolute;
				top: 6px;
				right: 10px;
				color: red;
				display: inline-block;
				font-size: 3em;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				overflow: hidden;
				text-shadow: 0 0 2px #fff;
			}
			
			.m_shop_list {
				padding: 5px;
				height: 340px;
			}
			
			.m_shop_list h1 {
				font-size: 14px;
				line-height: 21px;
			}
			
			.m_shop_list img {
				width: 99%;
			}
		</style>
	</head>

	<body>
		
		<div id="muiContent" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">

				<div id="groupimg" class="mui-slider">
<!--					<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1mobile"></a>
						<a class="mui-control-item" href="#item2mobile"></a>
					</div>-->
					<div class="mui-slider-group" id="good_img">
                                            <div style="text-align:center;" class="mui-slider-item">
                                                <img src="__ROOT__{$data.goods_imgs}" data-preview-src="" data-preview-group="1">
                                            </div>
                                            <volist name="data['goods_spec']" id="gs">
                                                <if condition="$gs['spec_img']">
                                                    <div style="text-align:center;" class="mui-slider-item ">
							<img src="__ROOT__{$gs['spec_img']}" data-preview-src="" data-preview-group="1">
                                                    </div>
                                                </if>
                                                
                                            </volist>
						
					</div>

					<!--a class="constrast-btn"><i>加入</i>购物车</a-->
				</div>
				<div class="pro_tit" id="good_detail">
					<h2>{$data.goods_name}</h2>
					<h3>{$data.goods_desc}</h3>
					<p>
						<b id="now_price">积分:{$data.integral}</b>
<!--						<del>￥3680</del>-->
						<a style="color: #3ab7cb; display: block; height: 30px; line-height: 30px; padding: 0px 5px 0px 5px;">{$data.brand}</a>
					</p>
				</div>
				<div class="pro_pz" id="goods_spec">
                                    <if condition="$data['spec_1']">
                                        <dl class="yanse spec_1"><dt>{$data.spec_1}： </dt>
                                            <dd>
                                            <volist name="data['goods_spec']" id="gs">
                                                <a class="">{$gs.spec_1}</a>
                                            </volist>

                                            </dd>
                                        </dl>
                                    </if>
                                    
                                    <if condition="$data['spec_2']">
                                    <dl class="yanse spec_2"><dt>{$data.spec_2}： </dt>
                                        <dd>
                                            <volist name="data['goods_spec']" id="gs">
                                            <a class="">{$gs.spec_2}</a>
                                        </volist>
                                        </dd>
                                    </dl>
                                    </if>
					<div style="clear:both;"></div>
				</div>

				<div class="jb_canshu" id="good_type">
					<h4>产品详情 </h4>
					{$data.goods_content|htmlspecialchars_decode}
				</div>
			</div>
		</div>
		<div class="mui-bar mui-bar-tab btn_box border_top" id="popover">
                    <div >
                        <a class="add_cart" thisUrl="{:U('Weixin/Index/settlement',array('id'=>$data['id']))}" id="gotoPay" data-src="" >立即购买</a>

                    </div>
                    <a id="daohuotz" style="display: none; float: right; width:120px;" class="add_cart">到货通知</a>
                    <div style="clear: both;"></div>
		</div>
	</body>
	<script src="__PUBLIC__/weixin/js/mui.js"></script>
	<script src="__PUBLIC__/weixin/js/mui.zoom.js"></script>
	<script src="__PUBLIC__/weixin/js/mui.previewimage.js"></script>
	<script>
            var goods_id = "{$data.id}";
            var goods_spec = '{$goods_spec}';
            var goods_spec_id = null;
		mui.init();
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});

		document.getElementById("gotoPay").addEventListener('tap', function() {
                        if(goods_spec == ''|| goods_spec == '[]'){
                            window.location.href = this.getAttribute("thisUrl");
                        }else{
                            if(goods_spec_id !== null){
                                window.location.href = this.getAttribute("thisUrl")+"?address=-1&spec_id="+goods_spec_id;
                            }else{
                                mui.alert("请选择产品规格!","提示","确定",function(){},'div');
                            }
                        }
			
		})

		//图片预览
		mui.previewImage();

                mui("#goods_spec .spec_1").on("click","a",function(){
                    var dom = mui("#goods_spec .spec_1 a");
                    for(var i = 0; i<dom.length; i++){
                        dom[i].setAttribute("class","");
                    }
                    this.setAttribute("class","cur");
                    checkSpec('spec_1',this.innerText);
                })
                
                mui("#goods_spec .spec_2").on("click","a",function(){
                    var dom = mui("#goods_spec .spec_2 a");
                    for(var i = 0; i<dom.length; i++){
                        dom[i].setAttribute("class","");
                    }
                    this.setAttribute("class","cur");
                    checkSpec('spec_2',this.innerText);
                })
                
                function checkSpec(type,value){
                    goods_spec_id = null;
					console.log(goods_spec);
                    if(goods_spec != ''|| goods_spec != '[]') {
                        var spec_arr = JSON.parse(goods_spec);
//                        console.log(spec_arr);
                        //可选列表
                        var c_l = [];
                        for(var i = 0; i < spec_arr.length; i++){
                            var item = spec_arr[i];
                            if(item[type] == value){
                                c_l.push(item);
                            }
                        }
                        var next_type = 'spec_2';
                        if(type == 'spec_2'){
                            next_type = 'spec_1';
                        }
                        
                        //判断下一个关联规格是否选中
                        eval("var domm = mui('#goods_spec ."+next_type+" a')");
						console.log(123);
                        console.log(domm.length);
                        //商品单个规格
                        if(domm.length < 1){
                            for(var i = 0; i < spec_arr.length; i++){
                                var item = spec_arr[i];
                                if(item[type] == value){
                                    //c_l.push(item);
                                    goods_spec_id = item.id;
                                    console.log(goods_spec_id)
                                    document.getElementById("now_price").innerHTML= "积分:"+item.spec_integral;
                                }
                            }
                            return false;
                        }
                        var cur = '';
                        for(var i = 0 ; i  < domm.length; i++){
                            if(domm[i].classList.contains('cur')){
                                cur = domm[i].innerText;
                            }
                        }
                        //关联规格选中了，判断是否能选
                        var c_status = false;
                        if(cur !== ''){
                            for(var i = 0; i< c_l.length;i++){
                                var im = c_l[i];
                                
                                if(( im[type] == value ) && ( im[next_type] == cur )){
                                    c_status = true;
                                    goods_spec_id = im.id;
                                    console.log(goods_spec_id);
                                    //处理当前产品价格
                                    document.getElementById("now_price").innerHTML= "积分:"+im.spec_integral;
                                }
                            }
                        }
                        console.log(c_status);
                        //移除选中样式
                        if(c_status === false){
                            eval("var ddomm = mui('#goods_spec ."+next_type+" dd')");
                            ddomm = ddomm[0];
                            var html = '';
                            for(var i = 0; i< c_l.length;i++){
                                var im = c_l[i];
                                html += '<a class="">'+im[next_type]+'</a>';
                            }
                            console.log(html);
                            ddomm.innerHTML = html;
                        }
                    }
                }
	</script>

</html>